@import '../../assets/css/reset.css';
@import '../../assets/css/common.css';
@import '../../assets/css/property.css';
@import '../../assets/libs/swiper/swiper-bundle.min.css';
.advert .swiper {
  height: 680px;
}
.advert .swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.advert .swiper-button-prev {
  width: 60px;
  height: 90px;
  background: rgba(0, 0, 0, 0.3);
  margin-left: -16px;
  color: #fff;
  text-align: center;
  transition: all 500ms;
}
.advert .swiper-button-next {
  width: 60px;
  height: 90px;
  background: rgba(0, 0, 0, 0.3);
  margin-right: -16px;
  color: #fff;
  text-align: center;
  transition: all 500ms;
}
.service {
  height: 550px;
  margin-top: 100px;
}
.service .writtenTop {
  width: 590px;
  margin: 0 auto;
  text-align: center;
}
.service .writtenTop h2 {
  font-size: 40px;
  color: #000;
  margin-bottom: 5px;
}
.service .writtenTop p {
  margin-bottom: 18px;
}
.service .writtenTop a {
  font-size: 12px;
  color: #1271ef;
}
.service .writtenTop a:hover {
  opacity: 0.5;
}
.service .serachCont {
  margin-top: 25px;
}
.service .serachCont div {
  width: 240px;
  height: 280px;
  box-shadow: 2px 4px 10px 0 rgba(18, 113, 239, 0.6);
}
.service .serachCont h2 {
  font-size: 22px;
  color: #000;
  margin: 0px 0px 5px 22px;
}
.service .serachCont p {
  font-size: 12px;
  margin: 0px 0px 18px 22px;
}
.service .serachCont a {
  font-size: 12px;
  color: #1271ef;
  margin-left: 22px;
}
.api {
  height: 590px;
  background: #f8f9fb url('../../assets/imgs/more-api-bg.svg') center no-repeat;
}
.api .writtenTop {
  width: 818px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0px 0px 0px;
}
.api .writtenTop h2 {
  font-size: 40px;
  color: #000;
  margin-bottom: 5px;
}
.api .writtenTop p {
  margin-bottom: 18px;
}
.api .writtenTop a {
  font-size: 12px;
  color: #1271ef;
}
.api .writtenTop a:hover {
  opacity: 0.5;
}
.api .employ {
  margin-top: 25px;
}
.api .employ ul {
  height: 315px;
}
.api .employ li {
  width: 224px;
  height: 138px;
  color: #181818;
  background-color: #ffffff;
  position: relative;
  box-shadow: 2px 4px 10px 0 rgba(18, 113, 239, 0.6);
}
.api .employ li a {
  display: block;
  width: 100%;
  height: 100%;
}
.api .employ li a img {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.api .employ li p {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #181818;
}
.api .botCont {
  width: 265px;
  margin: 16px auto;
}
.api .botCont a {
  color: #1271ef;
}
.api .botCont a:hover {
  opacity: 0.5;
}
.apimaster {
  height: 768px;
}
.apimaster .writtenTop {
  width: 917px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0px 0px 0px;
}
.apimaster .writtenTop h2 {
  font-size: 40px;
  color: #000;
  margin-bottom: 5px;
}
.apimaster .writtenTop p {
  margin-bottom: 18px;
}
.apimaster .writtenTop a {
  font-size: 12px;
  color: #1271ef;
}
.apimaster .writtenTop a:hover {
  opacity: 0.5;
}
.apimaster .apimasterCont .rightCont ul {
  height: 596px;
}
.apimaster .apimasterCont .rightCont ul li {
  width: 507px;
  height: 81px;
  background-color: #FBFBFD;
  padding: 14px 0px 0px 24px;
  line-height: 26px;
  box-sizing: border-box;
  position: relative;
}
.apimaster .apimasterCont .rightCont ul li .box {
  width: 4px;
  height: 24px;
  background: #1271ef;
  position: absolute;
  left: 0px;
  top: 28px;
}
.apimaster .apimasterCont .rightCont ul li h2 {
  color: #333;
  font-size: 18px;
  text-indent: 24px;
  position: relative;
}
.apimaster .apimasterCont .rightCont ul li h2 img {
  position: absolute;
  top: 5px;
  left: 0px;
}
.apimaster .apimasterCont .rightCont ul li p {
  font-size: 12px;
  color: #666;
}
.tycoon {
  height: 544px;
  margin-top: 100px;
}
.tycoon .writtenTop {
  width: 917px;
  margin: 0 auto;
  text-align: center;
  padding: 5px 0px 0px 0px;
}
.tycoon .writtenTop h2 {
  font-size: 40px;
  color: #000;
  margin-bottom: 15px;
}
.tycoon .writtenTop a {
  font-size: 12px;
  color: #1271ef;
}
.tycoon .writtenTop a:hover {
  opacity: 0.5;
}
.tycoon .content {
  width: 100%;
  height: 270px;
  margin-top: 75px;
  background-color: #f8f9fb;
}
.tycoon .content .item {
  position: relative;
  transition: all 1s;
  opacity: 0;
}
.tycoon .content .item .leftCont {
  width: 550px;
  height: 290px;
  position: absolute;
  top: -20px;
}
.tycoon .content .item .leftCont img {
  width: 550px;
  height: 290px;
}
.tycoon .content .item .rightCont {
  width: 574px;
  height: 270px;
  position: absolute;
  right: 0px;
}
.tycoon .content .item .rightCont .text {
  color: #000;
  line-height: 22px;
  margin-top: 50px;
}
.tycoon .content .item .rightCont span {
  color: #000;
  position: absolute;
  bottom: 26px;
  right: 0px;
}
.tycoon .content .item .rightCont::after {
  content: '';
  display: block;
  width: 13px ;
  height: 4px ;
  font-size: 12px;
  background-color: #1271ef;
  position: absolute;
  bottom: 32px;
  right: 105px;
}
.tycoon .content .item .rightCont img {
  position: absolute;
  top: -20px;
}
.tycoon .content .active {
  opacity: 1;
}
.safe {
  height: 255px;
}
.safe .writtenTop {
  width: 917px;
  margin: 0 auto;
  text-align: center;
  padding: 5px 0px 0px 0px;
}
.safe .writtenTop h2 {
  font-size: 40px;
  color: #000;
  margin-bottom: 5px;
}
.safe .writtenTop p {
  margin-bottom: 18px;
}
.safe .writtenTop a {
  font-size: 12px;
  color: #1271ef;
}
.safe .writtenTop a:hover {
  opacity: 0.5;
}
.safe .icon {
  width: 100%;
  margin-top: 20px;
}
.safe .icon li {
  width: 200px;
  height: 142px;
  position: relative;
}
.safe .icon li img {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.safe .icon li p {
  font-size: 12px;
  position: absolute;
  left: 50%;
  top: 77%;
  transform: translate(-50%, -50%);
}
.taste {
  width: 100%;
  height: 241px;
  background: #1271ef url(../../assets/imgs/login-register-bg.svg);
  margin-top: 100px;
  text-align: center;
  box-sizing: border-box;
}
.taste .taste-cont {
  width: 100%;
  color: #fff;
  padding-top: 64px;
}
.taste .taste-cont h2 {
  font-size: 32px;
  margin-bottom: 22px;
}
.taste .taste-cont a {
  display: inline-block;
  width: 128px;
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  color: #fff;
  border: 1px solid #fff;
}
.button {
  width: 40px;
  height: 40px;
  position: fixed;
  left: 50%;
  margin-left: 645px;
  bottom: 5px;
  border-radius: 50%;
  background: url(../../assets/imgs/returntopicon.jpg) no-repeat repeat;
  background-position: -163px -56px;
  display: none;
  cursor: pointer;
}
